﻿<%@ Page Title="" Language="C#" MasterPageFile="~/masterpagecuatui.Master" AutoEventWireup="true" CodeBehind="Contact.aspx.cs" Inherits="SQT.tracnghiem.Contact" %>

<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
    <title>Liên hệ - Tiếng nhật thật dễ</title>
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
    <div class="page-main-content w3-row w3-light-grey">
        <iframe class="ggmap" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3898.58287791045!2d109.19929831451356!3d12.276482233071132!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x317067efb7fcc85b%3A0x83a69f69577e825b!2zQ8O0bmcgdHkgY-G7lSBwaOG6p24gU0VOIHF14buRYyB04bq_IC0gRHUgaOG7jWMgTmjhuq10IELhuqNu!5e0!3m2!1svi!2sus!4v1474441316654" frameborder="0"></iframe>
        <div class="container">
            <div class="contact-info w3-row">
                <div class="w3-half">
                    <header class="w3-row w3-margin-bottom w3-xlarge"><span class="contact-tittle">Liên hệ với chúng tôi</span></header>
                    <ul class="w3-padding-bottom">
                        <li><i class="fa fa-map-marker w3-text-teal"></i>&nbsp;36A Đặng Tất, P. Vĩnh Hải, Nha Trang, Khánh Hòa</li>
                        <li><i class="fa fa-phone w3-text-teal"></i>&nbsp;0583 838 279</li>
                        <li><i class="fa fa-mobile-phone w3-text-teal"></i>&nbsp;0966.777.628 (Mr Ca)</li>
                        <li><i class="fa fa-envelope w3-text-teal"></i>&nbsp;info@senquocte.com</li>
                    </ul>
                </div>
                <div class="w3-half">
                    <header class="w3-row w3-margin-bottom w3-xlarge"><span class="contact-tittle">Mạng xã hội</span></header>
                    <iframe src="https://www.facebook.com/plugins/page.php?href=https%3A%2F%2Fwww.facebook.com%2Fsenquocte%2F&tabs=tin%20nh%E1%BA%AFn&width=400&height=214&small_header=false&adapt_container_width=true&hide_cover=false&show_facepile=true&appId" width="400" height="214" style="border: none; overflow: hidden" frameborder="0" allowtransparency="true"></iframe>
                </div>
            </div>

            <div id="get-in-touch" class="get-in-touch-form w3-row">
                <header class="w3-row w3-margin-bottom w3-xlarge"><span class="contact-tittle">Đăng ký lớp học tiếng Nhật</span></header>
                <div class="w3-third w3-padding-right">
                    <div class="w3-row w3-padding-bottom">
                        <label class="">Họ tên của bạn&nbsp;(<i class="w3-text-red fa fa-asterisk"></i>)</label><br />
                        <input type="text" id="contact_fullname" maxlength="100" class="w3-col l12" />
                    </div>
                    <div class="w3-row w3-padding-bottom">
                        <label class="">Ngày sinh&nbsp;(<i class="w3-text-red fa fa-asterisk"></i>)</label><br />
                        <div class="w3-col l4 w3-padding-right">
                            <select class="w3-padding" id="contact-day">
                                <%for (int i = 1; i <= 31; i++)
                                  { %>
                                <option value="<%=i %>"><%=i %></option>
                                <%} %>
                            </select>
                        </div>
                        <div class="w3-col l4 w3-padding-right">
                            <select class="w3-padding" id="contact-month">
                                <%for (int i = 1; i <= 12; i++)
                                  { %>
                                <option value="<%=i %>"><%=i %></option>
                                <%} %>
                            </select>
                        </div>
                        <div class="w3-col l3 w3-padding-right">
                            <select class="w3-padding" id="contact-year">
                                <option value="0" selected="selected">Năm sinh</option>
                                <%
                                    int get_year = DateTime.Now.Year - 8;
                                    for (int i = get_year; i >= get_year - 40; i--)
                                    {
                                        if (i == 1990)
                                        {
                                %>
                                <option selected="selected" value="<%=i%>"><%=i%></option>
                                <%}
                                        else
                                        {
                                %>
                                <option value="<%=i%>"><%=i%></option>
                                <%}
                                    } %>
                            </select>
                        </div>
                    </div>
                    <div class="w3-row w3-padding-bottom">
                        <label class="">Giới tính</label><br />
                        <div class="radio w3-col l12">
                            <input type="radio" name="sex" value="1" checked="checked" id="class-reg-male" /><label for="class-reg-male">Nam</label>&nbsp;
                            <input type="radio" name="sex" value="0" id="class-reg-female" /><label for="class-reg-female">Nữ</label>
                        </div>
                    </div>
                    <div class="w3-row w3-padding-bottom">
                        <label class="">Email&nbsp;(<i class="w3-text-red fa fa-asterisk"></i>)</label><br />
                        <input id="contact_email" type="email" maxlength="50" class="w3-col l12" />
                    </div>
                    <div class="w3-row w3-padding-bottom">
                        <label class="">Số điện thoại&nbsp;(<i class="w3-text-red fa fa-asterisk"></i>)</label><br />
                        <input id="contact_phone" type="text" maxlength="15" class="w3-col l12" />
                    </div>
                    <div class="w3-row w3-padding-bottom">
                        <label class="">Địa chỉ</label><br />
                        <input id="contact_address" type="text" class="w3-col l12" />
                    </div>
                    <div class="w3-row">
                        <label class="">Nghề nghiệp</label><br />
                        <input id="contact_job" type="text" maxlength="50" class="w3-col l12" />
                    </div>
                </div>
                <div class="w3-third w3-padding-right">
                    <div class="w3-row w3-padding-bottom">
                        <label class="">Bạn biết chúng tôi qua</label><br />
                        <select id="contact_traditional" class="class-reg-drop w3-col l12 w3-padding">
                            <option value="1" selected="selected">Bạn bè và người thân</option>
                            <option value="2">Facebook</option>
                            <option value="3">Google</option>
                            <option value="4">Trực tiếp đến công ty tìm hiểu</option>
                            <option value="0">Khác</option>
                        </select>
                        <input id="contact_traditional_other" type="text" class="khac w3-margin-top w3-padding w3-col l12" maxlength="50" placeholder="Nhập mục khác tại đây..." autofocus="autofocus" />
                    </div>
                    <div class="w3-row w3-padding-bottom">
                        <label class="">Mục đích học</label><br />
                        <select id="contact_purpose" class="class-reg-drop w3-col l12 w3-padding">
                            <option value="1" selected="selected">Học vì yêu thích văn hóa Nhật</option>
                            <option value="2">Học vì yêu thích tiếng Nhật</option>
                            <option value="3">Học để phục vụ công việc</option>
                            <option value="4">Học để du học Nhật Bản</option>
                            <option value="5">Học vì tò mò muốn biết thêm tiếng Nhật</option>
                            <option value="0">Khác</option>
                        </select>
                        <input id="contact_purpose_other" type="text" class="khac w3-margin-top w3-padding w3-col l12" maxlength="50" placeholder="Nhập mục khác tại đây..." autofocus="autofocus" />
                    </div>
                    <div class="w3-row w3-padding-bottom">
                        <label class="">Trình độ muốn đăng ký</label>
                        <select id="contact_degree" class="class-reg-drop w3-col l12 w3-padding">
                            <option value="1" selected="selected">N5</option>
                            <option value="2">N4</option>
                            <option value="3">N3</option>
                            <option value="4">N2</option>
                            <option value="5">N1</option>
                            <option value="0">Khác</option>
                        </select>
                        <input id="contact_degree_other" type="text" class="khac w3-margin-top w3-padding w3-col l12" maxlength="50" placeholder="Nhập mục khác tại đây..." autofocus="autofocus" />
                    </div>
                    <div class="w3-row">
                        <label class="">Lớp muốn đăng ký&nbsp;(<i class="w3-text-red fa fa-asterisk"></i>)</label>
                        <div class="checkbox">
                            <input type="checkbox" value="Lớp du học cả ngày" id="lop4" /><label for="lop4">Lớp du học cả ngày</label><br />
                            <input type="checkbox" value="17:30 - 19:00 thứ 2-4-6 hàng tuần" id="lop1" /><label for="lop1">17:30 - 19:00 thứ 2-4-6 hàng tuần</label><br />
                            <input type="checkbox" value="19:30 - 21:00 thứ 2-4-6 hàng tuần" id="lop2" /><label for="lop2">19:30 - 21:00 thứ 2-4-6 hàng tuần</label><br />
                            <input type="checkbox" value="18:45 - 21:00 thứ 3-5 hàng tuần" id="lop3" /><label for="lop3">18:45 - 21:00 thứ 3-5 hàng tuần</label><br />
                            <input type="checkbox" id="lop0" /><label for="lop0">Lớp theo yêu cầu</label>
                            <input id="contact_class_other" type="text" maxlength="50" class="khac w3-padding w3-col l12" placeholder="Nhập mục khác tại đây..." autofocus="autofocus" />
                        </div>
                    </div>
                </div>
                <div class="w3-third w3-padding-right">
                    <div class="w3-row w3-padding-bottom">
                        <label>Yêu cầu của bạn (nếu có) <a id="request_lenght">0</a>/20000</label><br />
                        <textarea id="contact_request" maxlength="20000" rows="7" class="w3-col l12 w3-padding"></textarea>
                    </div>
                    <div class="w3-row w3-padding-bottom"> 
                        <label>Mã xác nhận</label><br /> 
                        <div class="w3-row"><div id="captcha_area" class="w3-third"><iframe id="ifr_captcha" src="/Captcha.aspx" height="45" width="115" frameborder="0"></iframe></div>&nbsp;&nbsp;<a id="reload_captcha" class="renew-captcha-btn hvr-icon-spin" title="Lấy mã khác"></a></div>
                    </div>
                    <div class="w3-row w3-padding-bottom">
                        <label>Nhập mã xác nhận&nbsp;(<i class="w3-text-red fa fa-asterisk"></i>)</label><br />
                        <input type="text" id="txt_captcha" class="w3-half" />
                    </div>
                    <div class="w3-col l12 w3-padding-bottom">
                        <label>Những mục có dấu (<i class="w3-text-red fa fa-asterisk"></i>) là những thông tin bắt buộc</label><br />

                        <a id="btn_send_contact" class="w3-btn w3-teal">Gửi thông tin&nbsp;<i class="fa fa-send"></i></a>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div id="success-modal" class="w3-row w3-animate-right" style="position: fixed; right: 25px; bottom: 20%; display: none">
        <div class="w3-teal w3-card-4 w3-center" style="padding: 20px; opacity: 0.9">
            <header class="w3-large"><i class="fa fa-check"></i>&nbsp;<span class="success_content"></span></header>
        </div>
    </div>
    <div id="error-modal" class="w3-row w3-animate-right" style="position: fixed; right: 25px; bottom: 20%; display: none">
        <div class="w3-red w3-card-4 w3-center" style="padding: 20px; opacity: 0.9">
            <header class="w3-large"><i class="fa fa-times"></i>&nbsp;<span class="error_content"></span></header>
        </div>
    </div>
    <script src="Scripts/contactjava.js"></script>
</asp:Content>
